<script setup>
import VirtualList from "./components/virtual-list.vue";
import ItemVue from "./components/item.vue";
let items = [];
for (let i = 1; i <= 1000; i++) {
  items.push({
    id: i,
    name: `item${i}`,
  });
}
</script>

<template>
  <div>
    <div class="list">
      <virtual-list :size="40" :remain="8" :items="items">
        <template v-slot="{ item }">
          <item-vue :item="item"></item-vue>
        </template>
      </virtual-list>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.list {
  width: 300px;
  margin: 20px auto;
}
</style>
